<template>
    <div class="bg">


                <div  class="home" ref="banref" >

                    <div class="hometop">
                        <home-swiper :banners="banners"></home-swiper>
                    </div>


                    <div class="home_1">
                        <!-- <span class="ht1">Rouse首个创新性</span> -->
                        <div class="js">
                            <div class="h-txt">{{$t('test.home.js')}}</div>
                            <div class="test-title">{{$t('test.home.title')}}</div>
                            <div class="test-js1">{{$t('test.home.js1')}}</div>
                          <img src="../../src/assets/myimages/3.png" width="243px" height="246px">

                          <div class="js-title">{{$t('m.ptjs')}}</div>
                            <div class="js-c">
                              <p class="js-c-title">{{ $t('test.home.title') }}</p> <p class="js-c-title1">{{$t('test.home.js2')}}</p>
                           </div>
                          <div class="js-c-img">
                          <img src="../../src/assets/myimages/4.png" width="276px">
                          <p class="img-title">{{$t('test.home.js3')}}</p>
                          </div>
                        </div>


                        <div class="home_2">
                        <div class="lt6">
                                <div class="lt1">{{$t('m.jxsy')}}</div>

                          <div class="lt1-content" style="text-align:center">
                            <div class="mac">{{$t('test.home.js4')}}</div>
                            <div class="maclist">
                              <p>{{$t('test.home.js4_1._1')}}</p>
                              <p>{{$t('test.home.js4_1._2')}}</p>
                              <p>{{$t('test.home.js4_1._3')}}</p>
                            </div>
                            <div class="mac" style="letter-spacing: 0.2em;">{{$t('test.home.js4_2')}}</div>
                            <img class="l1" src="@/assets/myimages/5.png" width="200px" height="178px"/>
                          </div>
                        </div>
                    </div>
                      <div class="home_2">
                        <div class="lt6">
                          <div class="lt1">{{$t('m.cxwf')}}</div>
                          <div class="lt1-content" style="text-align:center">
                            <div class="js5-t">
                                <div class="item">
                                  <ul>
                                    <li>{{$t('test.home.js5.t1._1')}}</li>
                                    <li>{{$t('test.home.js5.t1._2')}}</li>
                                    <li>{{$t('test.home.js5.t1._3')}}</li>
                                  </ul>
                                </div>
                                <div class="item">
                                  <ul>
                                    <li>{{$t('test.home.js5.t2._1')}}</li>
                                    <li>{{$t('test.home.js5.t2._2')}}</li>
                                    <li>{{$t('test.home.js5.t2._3')}}</li>
                                  </ul>
                                </div>
                                <div class="item">
                                  <ul>
                                    <li>{{$t('test.home.js5.t3._1')}}</li>
                                    <li>{{$t('test.home.js5.t3._2')}}</li>
                                    <li>{{$t('test.home.js5.t3._3')}}</li>
                                  </ul>
                                </div>

                            </div>
                            <div class="js6">{{$t('test.home.js6')}}</div>
                            <img class="l1" src="@/assets/myimages/6.png" width="231px" height="200px"/>
                          </div>
                        </div>
                      </div>
                      <div class="home_2">
                        <div class="lt6">
                          <div class="lt1">{{$t('m.fxzl')}}</div>
                          <div class="js7">{{$t('test.home.js7')}}</div>
                          <div class="js8-title">
                          <div class="js8">{{$t('test.home.js8._1')}}</div>
                          <div class="js8">{{$t('test.home.js8._2')}}</div>
                          </div>
                          <div class="lt1-content" style="text-align:center">
                            <div class="js5-t js9">
                              <div class="item left-item">
                                <ul>
                                  <li class="js9-title">{{$t('test.home.js9.t1._1')}}</li>
                                  <li>{{$t('test.home.js9.t1._2')}}</li>
                                  <li>{{$t('test.home.js9.t1._3')}}</li>
                                  <li>{{$t('test.home.js9.t1._4')}}</li>
                                </ul>
                              </div>
                              <div class="item right-item">
                                <ul>
                                  <li class="js9-title">{{$t('test.home.js9.t2._1')}}</li>
                                  <li>{{$t('test.home.js9.t2._2')}}</li>
                                  <li>{{$t('test.home.js9.t2._3')}}</li>
                                  <li>{{$t('test.home.js9.t2._4')}}</li>
                                  <li>{{$t('test.home.js9.t2._5')}}</li>
                                </ul>
                              </div>
                            </div>
                            <div class="js10">{{$t('test.home.js10._1')}}</div>
                            <div class="js10">{{$t('test.home.js10._2')}}</div>
                            <div class="js10-strong js10">{{$t('test.home.js10._3')}}</div>

                          </div>
                        </div>
                      </div>
                      <div class="border">
                        <div class="bor-con">
                          <div class="b-title">{{$t('test.home.js11.title')}}</div>
                          <div class="b-c">
                            <div class="b-c-item" >
                              <div class="item-top">
                                <div class="item i-t">{{$t('test.home.js11.A._1')}}</div>
                                <div class="item i-zfxl">{{$t('test.home.js11.A._2')}}</div>
                                <div class="item i-sz">{{$t('test.home.js11.A._3')}}</div>
                              </div>
                              <div class="item-bottom">
                                <div class="item i-t">{{$t('test.home.js11.B._1')}}</div>
                                <div class="item i-zfxl">{{$t('test.home.js11.A._2')}}</div>
                                <div class="item i-sz">{{$t('test.home.js11.B._2')}}</div>
                                <div class="item i-one">{{$t('test.home.js11.B._3')}}</div>
                              </div>
                            </div>
                            <div class="b-c-item i-f" >
                              <div class="js11-right">{{$t('test.home.js11.right._1')}}</div>
                              <div class="js11-right">{{$t('test.home.js11.right._2')}}</div>
                              <div class="js11-right">{{$t('test.home.js11.right._3')}}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="home_2">
                        <div class="lt6">
                          <div class="lt1">{{$t('m.rhcy')}}</div>
                          <div class="js12">{{$t('test.home.js12._1')}}</div>
                          <div class="js12">{{$t('test.home.js12._2')}}</div>
                          <img class="l1" src="@/assets/myimages/7.png" width="237px" height="200px" style="margin-top: 15px"/>
                          <div class="js13">{{$t('test.home.js13._1')}}</div>
                          <div class="js13">{{$t('test.home.js13._2')}}</div>
                          <div class="js13">{{$t('test.home.js13._3')}}</div>
                          <div style="margin-top: 10px">
                            <div class="js14">{{$t('test.home.js14._1')}}</div>
                            <div class="js14">{{$t('test.home.js14._2')}}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
        <FootB></FootB>
            </div>

</template>

<script>
    import FootB from "components/content/footer/Foot.vue";
    import HomeSwiper from "components/common/homeswiper/HomeSwiper";


// @ is an alias to /src
    import {Notify} from 'vant';
import i18n from '@/i18n';
export default {
    name: 'HomeView',
    components:{
        HomeSwiper,
        FootB
    },
    data() {
        return {
            isZh: true,
            banners:[
                {url:'#', img_url:require('@/assets/banner/1.png')},
                {url:'#', img_url:require('@/assets/banner/2.png')},
                {url:'#', img_url:require('@/assets/banner/3.png')},
            ],

            page:0,
            isTabFixed:false,

            loading:true,
        };
    },

    created() {

        console.log(i18n.locale, '1111111111111111111');

        if (i18n.locale == 'zh') {
            this.$store.state.isZh = true
        } else {
            this.$store.state.isZh = false
        }
    },


    methods: {






        goUrl(url) {
            window.open(url, '_blank')
        },
        goNav() {
            this.$router.push('/nav')
        },
        share(txt) {

            var element = this.createElement(txt);
            element.select();
            element.setSelectionRange(0, element.value.length);
            document.execCommand('copy');
            element.remove();
            Notify({ type: 'success', message: this.$t("m.copy") });
        },
        //创建临时的输入框元素
        createElement(text) {
            var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
            var element = document.createElement('textarea');
            // 防止在ios中产生缩放效果
            element.style.fontSize = '12pt';
            // 重置盒模型
            element.style.border = '0';
            element.style.padding = '0';
            element.style.margin = '0';
            // 将元素移到屏幕外
            element.style.position = 'absolute';
            element.style[isRTL ? 'right' : 'left'] = '-9999px';
            // 移动元素到页面底部
            let yPosition = window.pageYOffset || document.documentElement.scrollTop;
            element.style.top = `${yPosition}px`;
            //设置元素只读
            element.setAttribute('readonly', '');
            element.value = text;
            document.body.appendChild(element);
            return element;
        }



    }

}
</script>
<style scoped lang="less">
    .goods {
        display: flex;
        width: 96%;
        height: 100vh;
        border-radius: 4px;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin:20px auto;

    }
    .wrapper {
        position: absolute;
        top:60px;
        bottom: 66px;
        left:0px;
        right:0px;
        overflow: hidden;
        .content {

        }
    }
.js-c-img{
  text-align: center;
  position: relative;
  .img-title{
    position: absolute;
    bottom: 45px;
    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 398;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    opacity: 0.9;
  }
}
.mac{
  font-family: 'Dream Han Sans SC';
  font-style: normal;
  font-weight: 398;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  opacity: 0.9;
}
.maclist {
  display: flex;
  justify-content: space-between;

  p {
    display: inline;
    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 693;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    padding: 5px 10px;
    border-radius: 30px;
    border: 2px solid #FB8417;
    margin: 25px 14px 15px;

  }
}
.js5-t{
  display: flex;
  justify-content: space-between;
  .item{
    margin: 7px;
    border: 1px solid transparent;
    box-sizing: border-box;
    border-radius: 20px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    border-color: rgba(251, 132, 23, 0.4);
    ul{
      padding: 4px 7px;
      border-radius: 20px;
      background: radial-gradient(69.9% 110.16% at 17.58% 4.3%, rgba(251, 132, 23, 0.25) 0%, rgba(52, 25, 0, 0.1) 78.06%);

    }
  }
  ul li{
    margin-bottom: 2px;
    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 398;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    opacity: 0.9;
  }
}
.js6{
  font-family: 'Dream Han Sans SC';
  font-style: normal;
  font-weight: 693;
  font-size: 20px;
  line-height: 20px;
  /* or 100% */
  text-align: center;
  letter-spacing: -0.02em;
  margin: 10px 0;
  /* 121 */
  background: linear-gradient(90.74deg, #FB8417 0.55%, #B75700 21.74%, #FFA859 63.14%, #FB8417 92.99%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;


}
.js7{
  font-family: 'Dream Han Sans SC';
  font-style: normal;
  font-weight: 693;
  font-size: 14px;
  line-height: 20px;
  /* identical to box height, or 143% */
  text-align: center;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.js8-title{
  margin: 10px 0;
}
.js8{
  font-family: 'Dream Han Sans SC';
  font-style: normal;
  font-weight: 398;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  opacity: 0.9;

}
.js9{
  .js9-title{
    opacity: 1;
  }
  .left-item{
    height: 100%;
  }
  .right-item{
    ul{
      padding: 4px 29px;
    }
  }
}
.js10{
  font-family: 'Dream Han Sans SC';
  font-style: normal;
  font-weight: 398;
  font-size: 13px;
  line-height: 20px;
  /* or 154% */
  text-align: center;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  opacity: 0.9;
  margin-bottom: 2px;
}
.js10-strong{
  font-weight:560;
  font-size: 14px;
  opacity: 1;
}
      .border {
        margin-bottom: 20px;
        width: 100%;
        height: auto;
        margin-top: 30px;
        border: 1px solid transparent;
        box-sizing: border-box;
        border-radius: 20px;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        border-color: rgba(251, 132, 23, 0.4);
        .bor-con {
          height: 100%;
          border-radius: 20px;
          background: linear-gradient(180deg, rgba(251, 132, 23, 0) 57.41%, rgba(251, 132, 23, 0.1) 100%);
          filter: drop-shadow(0px 1px 0px rgba(0, 0, 0, 0.05)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.05)) drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.1));
          backdrop-filter: blur(10px);
          box-sizing: border-box;
          margin: 0px 1px;
            .b-title{
              font-family: 'Dream Han Sans SC';
              font-style: normal;
              font-weight: 693;
              font-size: 20px;
              line-height: 32px;
              text-align: center;
              letter-spacing: -0.02em;
              background: linear-gradient(180deg, #D57123 0%, #F4BF43 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              text-fill-color: transparent;
              margin-top: 5px;
              padding-top: 10px;
            }
          .b-c{
            display: flex;
            padding: 0 15px;
            padding-bottom: 10px;

            justify-content: space-between;
            .i-f{
              display: flex;
              flex-direction:column;
              justify-content: space-between;
              align-items: center;
            }
            .b-c-item{
              padding-right: 5px;
              .item{
                padding: 2px 0;
              }
              .item-top{
                border-right: 1px solid rgba(251, 132, 23, 0.5);
                border-bottom: 1px solid rgba(251, 132, 23, 0.5);
                margin-top: 15px;
                width: 100%;

                padding-bottom: 10px;

              }
              .item-bottom{
                border-right: 1px solid rgba(251, 132, 23, 0.5);
                width: 100%;
                padding-top: 10px;
                
              }
              .js11-right{
                width: 122px;
                height: 40.24px;
                background: #FF993B;
                border-radius: 5.21739px;
                font-family: 'Inter';
                font-style: normal;
                font-weight: 500;
                text-align: center;
                font-size: 18.2609px;
                line-height:40.24px;
                letter-spacing: -0.02em;
                margin-top: 15px;
                color: #000000;
              };
              .i-t{
                font-family: 'Dream Han Sans SC';
                font-style: normal;
                font-weight: 693;
                font-size: 16px;
                line-height: 20px;
                letter-spacing: -0.02em;
                background: linear-gradient(90.74deg, #FB8417 0.55%, #B75700 21.74%, #FFA859 63.14%, #FB8417 92.99%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                text-fill-color: transparent;

              }
              .i-zfxl{
                font-family: 'Dream Han Sans SC';
                font-style: normal;
                font-weight: 398;
                font-size: 14px;
                line-height: 20px;
                /* identical to box height, or 143% */
                letter-spacing: -0.02em;
                color: rgba(255, 255, 255, 0.6);
              }
              .i-sz{
                font-family: 'Dream Han Sans SC';
                font-style: normal;
                font-weight: 693;
                font-size: 16px;
                line-height: 20px;
                /* identical to box height, or 125% */
                letter-spacing: -0.02em;
                color: #FFFFFF;
              }
              .i-one{
                font-family: 'Dream Han Sans SC';
                font-style: normal;
                font-weight: 398;
                font-size: 10px;
                line-height: 20px;
                letter-spacing: -0.02em;
                color: #FFFFFF;
              }
            }

          }

        }
      }


    .js12 {
      font-family: 'Dream Han Sans SC';
      font-style: normal;
      font-weight: 398;
      font-size: 14px;
      line-height: 20px;
      text-align: center;
      letter-spacing: -0.02em;
      color: #FFFFFF;
    }

    .js13 {
      font-family: 'Dream Han Sans SC';
      font-style: normal;
      font-weight: 398;
      font-size: 14px;
      line-height: 20px;
      text-align: center;
      letter-spacing: -0.02em;
      color: #FFFFFF;
    }

    .js14 {
      font-family: 'Dream Han Sans SC';
      font-style: normal;
      font-weight: 693;
      font-size: 14px;
      line-height: 24px;
      /* or 171% */
      text-align: center;
      letter-spacing: -0.02em;
      background: linear-gradient(90.74deg, #FB8417 0.55%, #B75700 21.74%, #FFA859 63.14%, #FB8417 92.99%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;


    }
</style>
<style scoped>
.test-title{
  font-family: 'Dream Han Sans SC';
  font-style: normal;
  font-weight: 693;
  font-size: 35px;
  line-height: 50px;
  background: linear-gradient(to right ,#FB8417 0% , #B75700 23%,#FFA859 68%,#FB8417 100%);
  -webkit-text-fill-color: transparent;
  color: #fff;
  /* or 143% */
  text-align: center;
  letter-spacing: 0.05em;
  background-clip: text;
}
.test-js1{
  font-family: 'Dream Han Sans SC';
  font-style: normal;
  font-weight: 398;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin-top:10PX;
  opacity: 0.9;
}
.js-title{
  font-family: 'Dream Han Sans SC';
  font-style: normal;
  font-weight: 693;
  font-size: 25px;
  line-height: 32px;
  /* identical to box height, or 128% */
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #D57123 0%, #F4BF43 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  margin-top: 15px;
  margin-bottom: 15px;

}
.js-c{
  font-family: 'Dream Han Sans SC';
  font-style: normal;

  font-size: 13px;
  line-height: 20px;
  text-align: center;
  letter-spacing: -0.02em;
  width: 88%;
  color: #FFFFFF;
  .js-c-title{
    display: inline;
    font-weight: 693;

  }
  .js-c-title1{
    opacity: 0.9;
    display: inline;
  }
}

@keyframes animated-border {
  0% {
    box-shadow: 0 0 0 0 rgba(255,255,255,0.4);
  }
  100% {
     box-shadow: 0 0 0 20px rgba(131, 184, 17, 0);
  }
}
.js{
  /*  animation: animated-border 1.5s infinite;*/
    display: flex;
    justify-content: center;
    flex-direction:column;
    align-items: center;
 /*   border: #FFC000 solid 1px;
    border-radius: 10px;*/
    padding: 20px;
    /* margin: 0 40px; */
  padding-bottom: 0;

}
    .hometop {
        background-color: #000;
        max-width: 550px;
        margin: auto;
        padding-top: 20px;

    }
.home_1{
    display: flex;
    padding: 0 10px;
    justify-content: center;
    flex-direction: column;
    align-items: center;

}
.h-txt  {
  /* background: linear-gradient(0deg, #FFC000 0%, #EE822F 100%); */
  -webkit-background-clip: text;
  background-clip: text;
  font-family: 'Dream Han Sans SC';
  font-style: normal;
  font-weight: 693;
  font-size: 35px;
  line-height: 50px;
  /* or 143% */
  text-align: center;
  letter-spacing: 0.05em;

  color: #FFFFFF;


  /* -webkit-text-fill-color: transparent; */
}

.home {
    padding: 0 25px;
    max-width: 500px;
    color: #ebe6e6;
    background-color: #000;
    font-size: 14px;
    line-height: 20px;
    height: auto;
    margin:auto;
}

.home_2{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: -25px;
}
.l{
    height: 300px;
    padding-top: 30px;
}
.l2{
    height: 70px;
    padding-top: 30px;
}
.l3{
    height: 250px;
    padding-top: 30px;
}
.lt{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: -210px;
    margin-bottom: 40px;

}
.lt2{
    display: flex;
    align-items: center;
    flex-direction: column;

    margin-bottom: 40px;

}
.lt6{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 25px;

}
.lt3{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: -160px;

}
.lt1{
    color: #FFBF00;
    font-size: 20px;
    margin-bottom: 20px;
  font-family: 'Dream Han Sans SC';
  font-style: normal;
  font-weight: 693;
  font-size: 25px;
  line-height: 32px;
  /* identical to box height, or 128% */
  text-align: center;
  letter-spacing: -0.02em;

  background: linear-gradient(180deg, #D57123 0%, #F4BF43 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;


}

.home_3{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 50px 0 0 0;
}
</style>

